<template>
	<div class="container" v-if="showEditDialogVisible">
		<el-dialog title="修改变量" :visible.sync="showEditDialogVisible" width="562px" :before-close="editHandleClose" :destroy-on-close="true" append-to-body>
			<el-form :model="form" :rules="rules" ref="addVariableRef" label-width="100px" class="demo-ruleForm" label-position="left">
				<el-form-item label="脱敏配置" prop="">
					<el-switch v-model="form.showSwitch"> </el-switch>
				</el-form-item>
				<div v-if="form.showSwitch" class="desensitization-box">
					<el-form-item label="脱敏配置模式" class="pattern" prop="desensConfigMode">
						<el-select v-model="form.desensConfigMode" placeholder="请选择脱敏模式" style="width: 95%" @change="changeDataMasking">
							<el-option v-for="item in desensitizationOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="AI播报话术脱敏规则" :required="true">
						<el-select
							:multiple="form.desensConfigMode === 'idCard' ? multipleType : false"
							:class="form.desensConfigMode === 'idCard' ? '' : 'single'"
							v-model="form.speechCheck"
							placeholder=""
							@change="onChangeSpeechSelect"
							style="width: 95%"
							:disabled="form.desensConfigMode == ''"
							v-if="showMultiple"
						>
							<!--姓名脱敏选项 -->
							<div v-if="form.desensConfigMode === 'userName'">
								<el-option v-for="item in userNameOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</div>
							<!--身份证脱敏选项 -->
							<div v-if="form.desensConfigMode === 'idCard'">
								<el-radio-group v-model="form.speechRadio">
									<el-radio
										v-for="k in rulesOption"
										:key="k"
										:label="k.label"
										:value="k.label"
										@change="onChangeSpeechRadio"
										style="display: block; margin: 10px 0 7px 10px"
									></el-radio>
								</el-radio-group>
								<span class="line"></span>
								<el-checkbox-group v-model="form.speechCheck">
									<el-option v-for="item in idCardCheck" :key="item" :label="item.label" :value="item.label">
										<el-checkbox :label="item.label" :checked="item.checked" style="pointer-events: none"></el-checkbox>
									</el-option>
								</el-checkbox-group>
							</div>

							<!--手机号 脱敏选项 -->
							<div v-if="form.desensConfigMode === 'phoneNumber'">
								<el-option v-for="item in mobileOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</div>
							<!--家庭地址脱敏选项 -->
							<div v-if="form.desensConfigMode === 'homeAddress'">
								<el-option v-for="item in addressOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</div>
						</el-select>
					</el-form-item>

					<el-form-item label="访客端字幕&聊天记录脱敏规则" :required="true" class="guest-subtitle-label" :hide-required-asterisk="true">
						<el-select
							:multiple="form.desensConfigMode === 'idCard' ? multipleType : false"
							:class="form.desensConfigMode === 'idCard' ? '' : 'single'"
							v-model="form.chatmsgCheck"
							placeholder=""
							@change="changeChatmsgSelect"
							style="width: 95%"
							:disabled="form.desensConfigMode == ''"
							v-if="showMultiple"
						>
							<!--姓名脱敏选项 -->
							<div v-if="form.desensConfigMode === 'userName'">
								<el-option v-for="item in userNameOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</div>
							<!--身份证脱敏选项 -->
							<div v-if="form.desensConfigMode === 'idCard'">
								<el-radio-group v-model="form.chatmsgRadio">
									<el-radio
										v-for="k in rulesOption"
										:key="k"
										:label="k.label"
										:value="k.label"
										@change="onChangeChatmsgRadio"
										style="display: block; margin: 10px 0 7px 10px"
									></el-radio>
								</el-radio-group>
								<span class="line"></span>
								<el-checkbox-group v-model="form.chatmsgCheck">
									<el-option v-for="item in idCardCheck" :key="item" :label="item.label" :value="item.label">
										<el-checkbox style="pointer-events: none" :label="item.label" :value="item.value" :checked="item.checked"></el-checkbox>
									</el-option>
								</el-checkbox-group>
							</div>
							<!--手机号 脱敏选项 -->
							<div v-if="form.desensConfigMode === 'phoneNumber'">
								<el-option v-for="item in mobileOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</div>
							<!--家庭地址脱敏选项 -->
							<div v-if="form.desensConfigMode === 'homeAddress'">
								<el-option v-for="item in addressOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</div>
						</el-select>
					</el-form-item>
					<el-form-item label="录像文件字幕脱敏规则" :required="true">
						<el-select
							:multiple="form.desensConfigMode === 'idCard' ? multipleType : false"
							:class="form.desensConfigMode === 'idCard' ? '' : 'single'"
							v-model="form.subtitleCheck"
							placeholder=""
							@change="changeSubtitleSelect"
							style="width: 95%"
							:disabled="form.desensConfigMode == ''"
							v-if="showMultiple"
						>
							<!--姓名脱敏选项 -->
							<div v-if="form.desensConfigMode === 'userName'">
								<el-option v-for="item in userNameOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</div>
							<!--身份证脱敏选项 -->
							<div v-if="form.desensConfigMode === 'idCard'">
								<el-radio-group v-model="form.subtitleRadio">
									<el-radio
										v-for="k in rulesOption"
										:key="k"
										:label="k.label"
										:value="k.label"
										@change="onChangeSubtitleRadio"
										style="display: block; margin: 10px 0 7px 10px"
									></el-radio>
								</el-radio-group>
								<span class="line"></span>
								<el-checkbox-group v-model="form.subtitleCheck">
									<el-option v-for="item in idCardCheck" :key="item" :label="item.label" :value="item.label">
										<el-checkbox style="pointer-events: none" :label="item.label" :value="item.value" :checked="item.checked"></el-checkbox>
									</el-option>
								</el-checkbox-group>
							</div>
							<!--手机号 脱敏选项 -->
							<div v-if="form.desensConfigMode === 'phoneNumber'">
								<el-option v-for="item in mobileOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</div>
							<!--家庭地址脱敏选项 -->
							<div v-if="form.desensConfigMode === 'homeAddress'">
								<el-option v-for="item in addressOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</div>
						</el-select>
					</el-form-item>
				</div>
				<el-form-item label="变量名" prop="variableName" style="margin-top: 16px" :class="showErrorText ? 'errorText-label' : ''">
					<el-input v-model="form.variableName" placeholder="例如：年龄" maxlength="10" style="width: 95%" @input="onVariableName"></el-input>
					<p class="default-text" v-if="defaultDisable">默认变量的变量名可改为相近词</p>
					<p class="error-text" v-if="showErrorText">当前变量名已被创建</p>
				</el-form-item>
				<el-form-item label="初始化方式" prop="initializationMode">
					<el-select v-model="form.initializationMode" placeholder="" style="width: 95%" @change="onChangeApi">
						<el-option v-for="item in initModeOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="初始化字段" prop="initializeField" v-if="isShowField">
					<el-input
						v-model="form.initializeField"
						:placeholder="form.initializationMode === 'user-data' ? '请输入随路数据返回结果中的数据字段' : '请输入API返回结果中的数据字段'"
						style="width: 95%"
						:disabled="editDisabled ? true : false"
						@input="onInitializeField"
					></el-input>
					<!-- :class="showFiledError ? 'errorText-label' : ''"
					<p class="error-text" v-show="showFiledError">该字段名已存在</p> -->
				</el-form-item>
				<div v-if="isShowApi">
					<el-form-item label="URL地址" prop="urlAddress">
						<!-- <el-input v-model="form.urlAddress" placeholder="请输入URL地址" id="urlAddress" class="input-textOverFlow"> </el-input> -->
						<ZcoInput
							:value="form.urlAddress"
							placeholder="请输入URL地址"
							id="urlAddress"
							class="input-textOverFlow"
							@input="onInput"
							:style="{
								width: 'calc(100% - 21px)'
							}"
						>
						</ZcoInput>
						<el-button icon="el-icon-plus" type="text" class="add-btn" @click.prevent="onAddVariable"></el-button>
					</el-form-item>
					<el-form-item label="调用方式" prop="callMode">
						<el-select v-model="form.callMode" placeholder="" style="width: 95%" @change="onChangeMode">
							<el-option v-for="item in callModeOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
						</el-select>
					</el-form-item>
				</div>
				<el-form-item label="传参变量" prop="" v-if="isShowTransferVariable">
					<el-select :value="getSelectedTextList()" multiple value-key="node-variable" placeholder="请选择要推送的变量" @remove-tag="onRemoveTag" style="width: 95%">
						<el-tabs v-model="activeName" @tab-click="handleClick" class="parameter-varible-text">
							<el-tab-pane label="客户信息" name="customer" class="customer-box">
								<div class="varible-role-box">
									<p class="role-text">角色：</p>
									<el-tag v-for="item in roleData" :key="item.id" class="role-tag" :class="{ activeTag: activeTag === item.id }" @click="checkRole(item.id)">{{ item.name }}</el-tag>
								</div>
								<el-option v-for="item in getVariablesByRole()" :key="item.id" :label="item.id">
									<div class="label" :class="selectedValues.includes(item.id) ? 'select' : ''" @click="onVariable(item)">{{ item.name }}</div>
								</el-option>
							</el-tab-pane>
							<el-tab-pane label="业务信息" name="business">
								<el-option v-for="item in businessData" :key="item.id" :label="item.id">
									<div class="label" :class="selectedValues.includes(item.id) ? 'select' : ''" @click="onBizVariable(item)">{{ item.name }}</div>
								</el-option>
							</el-tab-pane>
						</el-tabs>
					</el-select>
				</el-form-item>
				<el-form-item label="变量类型" prop="type">
					<el-select v-model="form.type" placeholder="" style="width: 95%" :disabled="editDisabled ? true : false">
						<el-option label="文本/字符串" value="text"></el-option>
						<el-option label="数值" value="numeric"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer" v-if="!showDetail">
				<el-button @click="editHandleClose">取 消</el-button>
				<el-button class="btns" type="primary" @click="editSureOnok">确 定</el-button>
			</span>
		</el-dialog>
		<UserAttribute v-if="isShowUserAttribute" :dialogVisible="isShowUserAttribute" :sceneData="sceneData" ref="UserAttribute" @on-ok="onChosseUserAttribute" @on-cancel="onCloseUserAttribute" />
	</div>
</template>

<script>
import { getCustomerVariablesDetails, getAllRole, getInitModeVaribles, getBusinessInitModeVaribles, checkVariableName, checkVariableLinkedKey, getVariablesAll } from '@/api/api.js';
import UserAttribute from './UserAttribute.vue';
import { insertStr, backupData } from '@/utils/tool';
import _ from 'lodash';
import ZcoInput from '../../AiWorkFlow/components/TinymceInput.vue';
export default {
	name: '',
	components: { UserAttribute, ZcoInput },
	props: {
		showEditDialogVisible: {
			required: true,
			type: Boolean,
			default: () => false
		},
		showDetail: {
			type: Boolean,
			default: () => false,
			required: true
		},
		isShowErrorText: {
			required: true,
			type: Boolean,
			default: () => false
		},
		showFiledError: {
			required: true,
			type: Boolean,
			default: () => false
		},
		editRowId: {
			require: true,
			type: Number,
			default: () => 0
		},
		activeTag: {
			type: Number,
			default: () => 0,
			required: true
		},
		showErrorText: {
			type: Boolean,
			default: () => false,
			required: true
		}
	},
	data() {
		const validateVariableName = async (rule, value, callback) => {
			let flag = new RegExp('^[0-9A-Za-z\u4e00-\u9fa5]+$', 'g').test(value);
			if (value === '') {
				console.log('validateVariableName', value);
				this.defaultDisable = false;
				this.showErrorText = false;
				return callback(new Error('请编辑变量名'));
			} else if (!flag) {
				return callback(new Error('支持中英文数字输入，最大长度为10个中文汉字'));
			} else if (value.trim().length > 10 || value.trim().length < 1) {
				return callback(new Error('支持中英文数字输入，最大长度为10个中文汉字'));
			}

			if (this.oldForm.variableName === value) {
				return callback();
			}
			//  校验变量名是否重复
			let params = {
				scenId: JSON.parse(sessionStorage.getItem('sceneData'))?.id || this.$route.params.scenId,
				name: value,
				roleId: this.roleId
			};
			console.log(params);
			const { data } = await checkVariableName(params);
			console.warn(data.data.data);
			if (data?.data?.data?.length > 0 && !this.editDisabled) {
				this.defaultDisable = false;
				return callback(new Error('当前变量名已被创建'));
			}

			return callback();
		};
		const validateInitializeField = async (rule, value, callback) => {
			let flag = new RegExp(/^[A-Za-z_]+$/, 'g').test(value.substring(0, 1));
			if (!flag) {
				return callback(new Error('支持大小写字母或_开头由字母、数字和_组成的字符串，最大长度128个字符'));
			} else if (value.trim().length > 128 || value.trim().length < 1) {
				return callback(new Error('支持大小写字母或_开头由字母、数字和_组成的字符串，最大长度128个字符'));
			}
			if (this.oldForm.initializeField === value) {
				return callback();
			}
			console.log(this.oldForm, this.roleId);
			//  校验初始化字段是否重复
			let params = {
				scenId: JSON.parse(sessionStorage.getItem('sceneData'))?.id || this.$route.params.scenId,
				linkedKey: value,
				roleId: this.roleId
			};
			// console.log(params);
			const { data } = await checkVariableLinkedKey(params);
			// console.warn(data.data.data);
			if (data?.data?.data?.length > 0 && !this.editDisabled) {
				return callback(new Error('该字段名已存在'));
			}
			this.$refs.addVariableRef.validateField('variableName');
			return callback();
		};
		const validateUrlAddress = (rule, value, callback) => {
			console.log(value);
			let flag = new RegExp(/(http|https):\/\/\S*/).test(value);
			if (!flag) {
				return callback(new Error('所输入的URL地址需为https://或http://开头'));
			}
			return callback();
		};
		return {
			form: {
				variableName: '', //变量名
				describe: '', //变量描述
				initializationMode: 'user-data', //初始化方式
				type: 'text', //变量类型
				urlAddress: '', //URL地址
				callMode: 'get', //调用方式
				transferParameterVariable: [], //传参变量
				desensConfigMode: '', //脱敏配置模式
				//AI播报话术脱敏规则
				speechRadio: '不脱敏', //AI播报话术脱敏规则单选
				speechCheck: '不脱敏', //AI播报话术脱敏规则  复选框
				//录像文件字幕脱敏规则
				subtitleRadio: '不脱敏',
				subtitleCheck: '不脱敏',
				// 访客端字幕&聊天记录脱敏规则
				chatmsgRadio: '不脱敏',
				chatmsgCheck: '不脱敏',
				showSwitch: false,
				disabledSelest: false, // 初始化进来默认禁用，不脱敏
				initializeField: ''
			},
			roleId: null,
			initModeOption: [
				{ label: '随路数据', value: 'user-data' },
				{ label: '非初始化', value: 'non-init' },
				{ label: 'API获取', value: 'api-data' }
			],
			callModeOption: [
				{ label: 'get方法', value: 'get' },
				{ label: 'post方法', value: 'post' }
			],
			transferParameterVariableOption: [], // 传参变量option下拉框列表
			pageData: {
				page: 1,
				pageSize: 100,
				total: 0
			},
			isShowUserAttribute: false,
			isShowApi: false,
			isShowTransferVariable: false,
			rules: {
				variableName: [
					// { required: true, message: '请编辑变量名', trigger: 'blur' },
					{ validator: validateVariableName, trigger: 'blur' }
				],
				initializeField: [
					{ required: true, message: '请输入字段名', trigger: 'blur' },
					{ validator: validateInitializeField, trigger: 'blur' }
				],
				initializationMode: [{ required: true, message: '请选择初始化方式', trigger: 'change' }],
				type: [{ required: true, message: '请选择初始化方式', trigger: 'change' }],
				urlAddress: [
					{ required: true, message: '请输入URL地址', trigger: 'blur' },
					{ validator: validateUrlAddress, trigger: 'blur' }
				],
				callMode: [{ required: true, message: '请选择初调用方式', trigger: 'change' }],
				desensConfigMode: [{ required: true, message: '请选择脱敏模式', trigger: 'change' }]
			},
			desensitizationOption: [
				{ label: '姓名', value: 'userName' },
				{ label: '身份证号', value: 'idCard' },
				{ label: '手机号', value: 'phoneNumber' },
				{ label: '家庭地址', value: 'homeAddress' }
			],
			userNameOption: [
				{ label: '不脱敏', value: 0 },
				{ label: '全脱敏', value: 4 },
				{ label: '保留首字', value: 1 },
				{ label: '保留末字', value: 2 },
				{ label: '首末各留一字', value: 3 }
			],
			rulesOption: [
				{ label: '不脱敏', value: 0 }
				// { label: '全脱敏', value: 15 }
			],
			idCardCheck: [
				{ label: '脱敏地址区', value: 1, id: 1, checked: false },
				{ label: '脱敏生日区', value: 4, id: 2, checked: false },
				{ label: '脱敏生日月日区', value: 8, id: 3, checked: false },
				{ label: '脱敏顺序号', value: 2, id: 4, checked: false }
			],
			mobileOption: [
				{ label: '不脱敏', value: 0 },
				{ label: '全脱敏', value: 4 },
				{ label: '保留前三位', value: 1 },
				{ label: '保留后四位', value: 2 },
				{ label: '脱敏中间四位', value: 3 }
			],
			addressOption: [
				{ label: '不脱敏', value: 0 },
				{ label: '全脱敏', value: 4 },
				{ label: '保留首字', value: 1 },
				{ label: '保留末字', value: 2 },
				{ label: '首末各留一字', value: 3 }
			],
			showMultiple: true,
			multipleType: true,
			isShowField: true,
			roleData: [],
			activeName: 'customer',
			scenId: JSON.parse(sessionStorage.getItem('sceneData'))?.id || this.$route.params.scenId,
			businessData: [],
			editDisabled: false,
			initMode: '',
			selectedValues: [], // 已选择的变量名
			oldForm: {},
			defaultDisable: false
		};
	},

	mounted() {
		this.initEditVariable();
		this.initAllRole();
		this.initBusinessData();
		this.getVariablesAll();
		// console.log(this.idCardCheck, this.form, this.multipleType, this.activeTag);
	},
	watch: {
		'form.speechCheck'(newVal, oldVal) {
			if (newVal instanceof Array && newVal.indexOf('脱敏生日区') !== -1 && newVal.indexOf('脱敏生日月日区') === -1) {
				// console.warn(newVal, oldVal);
				newVal.push('脱敏生日月日区');
			}
			if (oldVal instanceof Array && oldVal.indexOf('脱敏生日区') !== -1 && newVal.indexOf('脱敏生日区') === -1) {
				let index = newVal.indexOf('脱敏生日月日区');
				// console.log(newVal, oldVal);
				if (index > -1) {
					newVal.splice(index, 1);
				}
			}
		},
		'form.subtitleCheck'(newVal, oldVal) {
			if (newVal instanceof Array && newVal.indexOf('脱敏生日区') !== -1 && newVal.indexOf('脱敏生日月日区') === -1) {
				newVal.push('脱敏生日月日区');
			}
			if (oldVal instanceof Array && oldVal.indexOf('脱敏生日区') !== -1 && newVal.indexOf('脱敏生日区') === -1) {
				let index = newVal.indexOf('脱敏生日月日区');
				if (index > -1) {
					newVal.splice(index, 1);
				}
			}
		},
		'form.chatmsgCheck'(newVal, oldVal) {
			if (newVal instanceof Array && newVal.indexOf('脱敏生日区') !== -1 && newVal.indexOf('脱敏生日月日区') === -1) {
				newVal.push('脱敏生日月日区');
			}
			if (oldVal instanceof Array && oldVal.indexOf('脱敏生日区') !== -1 && newVal.indexOf('脱敏生日区') === -1) {
				let index = newVal.indexOf('脱敏生日月日区');
				if (index > -1) {
					newVal.splice(index, 1);
				}
			}
		},
		activeTag: {
			handler(newVal, oldVal) {
				console.log(newVal, oldVal, this.activeTag);
			}
		}
	},
	methods: {
		editHandleClose() {
			this.$emit('editHandleClose');
			this.isShowApi = false;
			this.isShowTransferVariable = false;
			this.$refs['addVariableRef'].resetFields();
			//取消按钮 清除选择的传参变量
			this.form.transferParameterVariable = '';
			this.form.callMode = 'get';
			this.form.urlAddress = '';
			this.form.desensConfigMode = '';
			this.form.speechRadio = '不脱敏';
			this.form.speechCheck = ['不脱敏'];
			this.form.chatmsgRadio = '不脱敏';
			this.form.chatmsgCheck = ['不脱敏'];
			this.form.subtitleRadio = '不脱敏';
			this.form.subtitleCheck = ['不脱敏'];
			this.form.disabledSelest = false;
			this.form.speechCheck = '不脱敏';
			this.form.subtitleCheck = '不脱敏';
			this.form.chatmsgCheck = '不脱敏';
			this.form.showSwitch = false;
		},
		editSureOnok() {
			this.$refs['addVariableRef'].validate(valid => {
				if (valid) {
					console.log(this.oldForm, 'oldForm');
					console.log('form', this.form);
					this.$emit('editSureOnok', this.form, this.onVariableChange());
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		onChosseUserAttribute(data, businessData) {
			console.log(data);
			this.isShowUserAttribute = false;
			const wordsDom = document.getElementById('urlAddress');
			//data: 选择的客户信息变量
			if (data) {
				console.log(this.$refs.UserAttribute.attribute, 999);
				// 在AI播报话术/AI说输入一段文字，光标移动到那里就要在这段文字中间插入用户属性
				this.form.urlAddress = insertStr(this.form.urlAddress, wordsDom, `{{客户信息_${data.bizscenario_role.name}_${data.name}_${data.id}}}`);
			}
			// businessData : 选择业务信息变量
			if (businessData) {
				this.form.urlAddress = insertStr(this.form.urlAddress, wordsDom, `{{业务信息_${businessData.name}_${businessData.id}}`);
			}
		},
		onCloseUserAttribute() {
			this.isShowUserAttribute = false;
		},
		onAddVariable() {
			this.isShowUserAttribute = true;
		},
		onChangeApi() {
			console.log(this.form.initializationMode, 'onChangeApi');
			if (this.form.initializationMode === 'api-data') {
				this.isShowApi = true;
				this.rules.initializeField[0].message = '';
				this.rules.initializeField[0].message = '请输入API返回结果中的数据字段';
				this.initAllRole();
				if (this.form.callMode === 'post') {
					this.isShowTransferVariable = true;
				} else {
					this.isShowTransferVariable = false;
				}
			} else {
				this.isShowApi = false;
				this.isShowTransferVariable = false;
				this.rules.initializeField[0].message = '';
				this.rules.initializeField[0].message = '请输入字段名';
			}
			if (this.form.initializationMode !== 'non-init') {
				this.isShowField = true;
				this.form.initializeField = this.initMode;
			} else {
				this.isShowField = false;
			}
			this.oldForm = backupData(this.form);
			// console.warn(this.form.initializeField, 111, this.initMode);
		},
		onChangeMode() {
			if (this.form.callMode === 'post') {
				this.isShowTransferVariable = true;
			} else {
				this.isShowTransferVariable = false;
			}
		},
		// 切换脱敏配置模式 的时候清空 勾选 的数据
		changeDataMasking() {
			console.log(this.form.desensConfigMode);
			this.form.speechCheck = '';
			this.form.subtitleCheck = '';
			this.form.chatmsgCheck = '';
			if (this.form.desensConfigMode === 'userName') {
				this.form.speechCheck = '不脱敏';
				this.form.subtitleCheck = '不脱敏';
				this.form.chatmsgCheck = '不脱敏';
			} else if (this.form.desensConfigMode === 'idCard') {
				this.multipleType = true;
				this.form.speechRadio = '不脱敏';
				this.form.speechCheck = this.multipleType ? ['不脱敏'] : '';
				this.form.chatmsgRadio = '不脱敏';
				this.form.chatmsgCheck = this.multipleType ? ['不脱敏'] : '';
				this.form.subtitleRadio = '不脱敏';
				this.form.subtitleCheck = this.multipleType ? ['不脱敏'] : '';

				this.showMultiple = false;
				setTimeout(() => {
					this.showMultiple = true;
				});
				console.log(this.form.speechCheck, 'speechCheck');
				console.log(this.form.subtitleCheck, 'subtitleCheck');
				console.log(this.form.chatmsgCheck, 'chatmsgCheck');
			} else if (this.form.desensConfigMode === 'phoneNumber') {
				this.form.speechCheck = '不脱敏';
				this.form.subtitleCheck = '不脱敏';
				this.form.chatmsgCheck = '不脱敏';
			} else if (this.form.desensConfigMode === 'homeAddress') {
				this.form.speechCheck = '不脱敏';
				this.form.subtitleCheck = '不脱敏';
				this.form.chatmsgCheck = '不脱敏';
			}
			this.form.disabledSelest = false;
		},
		// AI播报话术脱敏规则选择的事件
		onChangeSpeechRadio(val) {
			console.log(val);
			console.log('onChangeSpeechRadio:', this.form.desensConfigMode);
			if (this.form.desensConfigMode === 'idCard') {
				if (val === '不脱敏') {
					this.form.speechCheck = [];
					this.form.speechCheck.push(val);
				}
			}
		},
		onChangeSpeechSelect(value) {
			const { form: { desensConfigMode = '', speechCheck = [] } = {} } = this;
			console.log('AI播报话术脱敏规则选择的事件', value);
			console.log('onChangeSpeechSelect: ', speechCheck);
			if (desensConfigMode === 'idCard') {
				if (value.length > 0) {
					this.form.speechRadio = '';
				}
				if (this.form.speechCheck.length > 1) {
					this.form.speechCheck = this.form.speechCheck.filter(item => item !== '不脱敏');
				}
				if (value.length === 0) {
					this.form.speechRadio = '不脱敏';
					this.form.speechCheck = ['不脱敏'];
				}
			}
		},

		// 访客端字幕&聊天记录脱敏规则选择到输入框的值
		onChangeChatmsgRadio(val) {
			if (this.form.desensConfigMode === 'idCard') {
				if (val === '不脱敏') {
					this.form.chatmsgCheck = [];
					this.form.chatmsgCheck.push(val);
				}
			}
		},
		changeChatmsgSelect(value) {
			// console.log(value);
			console.log('changeChatmsgSelect : ', this.form.chatmsgCheck);
			if (this.form.desensConfigMode === 'idCard') {
				if (value.length > 0) {
					this.form.chatmsgRadio = '';
				}
				if (value.length > 1) {
					this.form.chatmsgCheck = this.form.chatmsgCheck.filter(item => item !== '不脱敏');
				}
				if (value.length === 0) {
					this.form.chatmsgRadio = '不脱敏';
					this.form.chatmsgCheck = ['不脱敏'];
				}
			}
		},
		onChangeSubtitleRadio(val) {
			console.log(val);
			if (this.form.desensConfigMode === 'idCard') {
				if (val === '不脱敏') {
					console.log(this.form.subtitleCheck);
					this.form.subtitleCheck = [];
					this.form.subtitleCheck.push(val);
				}
			}
		},
		//录像文件字幕脱敏规则下拉框选择的值
		changeSubtitleSelect(value) {
			console.log('changeSubtitleSelect : ', this.form.subtitleCheck);
			if (this.form.desensConfigMode === 'idCard') {
				if (value.length > 0) {
					this.form.subtitleRadio = '';
				}
				if (value.length > 1) {
					this.form.subtitleCheck = this.form.subtitleCheck.filter(item => item !== '不脱敏');
				}
				if (value.length === 0) {
					this.form.subtitleRadio = '不脱敏';
					this.form.subtitleCheck = ['不脱敏'];
				}
			}
		},
		initEditVariable() {
			getCustomerVariablesDetails(this.scenId, this.editRowId)
				.then(res => {
					const { name, type, initMode, dataMasking, isDefault, method, url, params, linkedKey, roleId = null } = res.data.data;
					console.log('initEditVariable:', res.data.data);
					this.editDisabled = isDefault;
					this.defaultDisable = isDefault;
					this.roleId = roleId;
					// console.log('isDefault:', isDefault);
					this.form.variableName = name;
					this.form.initializationMode = initMode;
					this.form.type = type;
					this.form.urlAddress = url;
					if (method) {
						this.form.callMode = method;
					}
					// console.warn(method);
					this.form.transferParameterVariable = params;
					//  && (initMode === 'user-data' || initMode === 'api-data')
					this.initMode = linkedKey;
					if (linkedKey && (initMode === 'user-data' || initMode === 'api-data')) {
						this.form.initializeField = linkedKey;
					} else {
						this.isShowField = false;
					}
					if (url) {
						this.isShowApi = true;
					} else {
						this.isShowApi = false;
					}
					if (method === 'post') {
						this.isShowTransferVariable = true;
					} else {
						this.isShowTransferVariable = false;
					}
					console.warn(dataMasking, 'dataMasking', this.form.desensConfigMode);
					// 脱敏配置 数据回显
					if (dataMasking && dataMasking.applyTo && dataMasking.type) {
						this.form.desensConfigMode = dataMasking.type;
						this.form.showSwitch = dataMasking.enabled;
						this.form.speechCheck = this.getDetailSpeech(dataMasking.type, dataMasking.applyTo.speech);
						this.form.chatmsgCheck = this.getDetailChatmsg(dataMasking.type, dataMasking.applyTo.chatmsg);
						this.form.subtitleCheck = this.getDetailSubtitle(dataMasking.type, dataMasking.applyTo.subtitle);
						console.log(this.form.chatmsgCheck, 'select', this.form.speechCheck, this.form.subtitleCheck);
						// 脱敏身份证特殊处理 如果是身份证号码脱敏字符串类型转数组
						if (dataMasking.type === 'idCard') {
							this.form.speechCheck = [];
							let str = this.getDetailSpeech(dataMasking.type, dataMasking.applyTo.speech);
							this.form.speechCheck.push(str);
							// console.warn(this.form.speechCheck, str);
							this.form.chatmsgCheck = [];
							let str2 = this.getDetailChatmsg(dataMasking.type, dataMasking.applyTo.chatmsg);
							this.form.chatmsgCheck.push(str2);
							this.form.subtitleCheck = [];
							let str3 = this.getDetailSubtitle(dataMasking.type, dataMasking.applyTo.subtitle);
							this.form.subtitleCheck.push(str3);
						}
					}
					if (initMode === 'non-init' || initMode === 'user-data') {
						this.isShowApi = false;
						this.isShowTransferVariable = false;
					}
					this.oldForm = backupData(this.form);
					console.warn(this.oldForm, 'oldForm:');
					console.log(this.form, 'form');
				})
				.catch(err => {
					console.log(err);
					this.$message.error('获取变量详情失败！');
				});
		},
		initAllRole() {
			getAllRole(this.scenId)
				.then(res => {
					this.roleData = res.data.data;
					// eslint-disable-next-line vue/no-mutating-props
					this.activeTag = res.data.data[0]?.id;
					// if (this.activeTag) {
					// 	this.initcustomerData(this.activeTag);
					// }
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 客户信息变量配置初始化
		initcustomerData(id) {
			let data = {
				scenId: this.scenId,
				initMode: 'user-data',
				roleId: id || this.activeTag
			};
			getInitModeVaribles(data)
				.then(res => {
					console.log(res.data.data, 'initcustomerData');
					this.transferParameterVariableOption = res.data.data.data.map(item => {
						return {
							id: item.id,
							name: item.name,
							roleId: item.roleId,
							dataMasking: item.dataMasking,
							params: item.params,
							url: item.url,
							method: item.method,
							linkedKey: item.linkedKey,
							isDefault: item.isDefault,
							roleName: item.bizscenario_role.name,
							select: `客户信息-${item.bizscenario_role.name}-${item.name}`
						};
					});
				})
				.catch(err => {
					console.log(err);
					this.$message.error('获取客户信息变量列表失败！');
				});
		},
		// 客户信息变量配置初始化
		initBusinessData() {
			let data = {
				scenId: this.scenId,
				initMode: 'user-data'
			};
			getBusinessInitModeVaribles(data)
				.then(res => {
					console.log(res.data.data, 'initBusinessData');
					this.businessData = res.data.data.data;
				})
				.catch(err => {
					console.log(err);
					this.$message.error('获取客户信息变量列表失败！');
				});
		},
		checkRole(id) {
			// eslint-disable-next-line vue/no-mutating-props
			this.activeTag = id;
			// this.initcustomerData(this.activeTag);
		},
		getVariablesByRole() {
			return this.transferParameterVariableOption.filter(item => item.roleId === this.activeTag);
		},
		getVariablesAll() {
			let param = {
				scenId: this.scenId,
				page: 1,
				pageSize: 10000
			};
			getVariablesAll(param)
				.then(res => {
					if (res.data.data && res.data.data.rows) {
						res.data.data.rows.map(item => {
							if (item.roleId && item.initMode === 'user-data') {
								const data = {
									id: item.id,
									name: item.name,
									roleId: item.roleId,
									dataMasking: item.dataMasking,
									params: item.params,
									url: item.url,
									method: item.method,
									linkedKey: item.linkedKey,
									isDefault: item.isDefault,
									key: item.name,
									property: item.type,
									content: '',
									initMode: item.initMode,
									scenId: this.scenId,
									roleName: item.bizscenario_role.name
								};
								this.transferParameterVariableOption.push(data);
							}
						});
						this.pageData.total = res.data.data.count;
						this.parseInValue();
					} else {
						console.warn('get variable list error ', res.data);
					}
				})
				.catch(err => {
					console.log(err);
					this.$message.error('获取客户信息变量列表失败！');
				});
		},
		onVariable(value) {
			if (this.selectedValues.includes(value.id)) {
				this.removeSelectVariable(value.id);
			} else {
				this.selectedValues.push(value.id);
			}
			this.onVariableChange();
		},
		onBizVariable(value) {
			if (this.selectedValues.includes(value.id)) {
				this.removeSelectVariable(value.id);
			} else {
				this.selectedValues.push(value.id);
			}
			this.onVariableChange();
		},
		removeSelectVariable(vid) {
			const index = this.selectedValues.indexOf(vid);
			if (index >= 0) {
				this.selectedValues.splice(index, 1);
			}
		},
		onRemoveTag(value) {
			// 客户信息 业务信息
			if (value.includes('客户信息')) {
				for (const item of this.transferParameterVariableOption) {
					const text = `客户信息-${item.roleName}-${item.name}`;
					if (value === text) {
						this.removeSelectVariable(item.id);
						break;
					}
				}
			} else if (value.includes('业务信息')) {
				for (const item of this.businessData) {
					const text = `业务信息-${item.name}`;
					if (value === text) {
						this.removeSelectVariable(item.id);
						break;
					}
				}
			}

			this.onVariableChange();
		},
		getSelectedTextList() {
			let list = [];
			this.selectedValues.map(id => {
				// console.log(id);
				for (const item of this.transferParameterVariableOption) {
					// console.warn(item);
					if (id === item.id) {
						list.push(`客户信息-${item.roleName}-${item.name}`);
						break;
					}
				}
				for (const item of this.businessData) {
					if (id === item.id) {
						list.push(`业务信息-${item.name}`);
						break;
					}
				}
			});
			// console.warn(list, 'getSelectedTextList', this.transferParameterVariableOption);
			return list;
		},
		onVariableChange() {
			let list = [];
			this.selectedValues.map(id => {
				for (const item of this.transferParameterVariableOption) {
					if (id === item.id) {
						list.push(item);
						break;
					}
				}
				for (const item of this.businessData) {
					if (id === item.id) {
						list.push(item);
						break;
					}
				}
			});
			// this.$emit('onVariableChange', list);
			return list;
		},
		parseInValue() {
			// console.log(this.form.transferParameterVariable, 'transferParameterVariable:');
			if (this.form.transferParameterVariable) {
				this.form.transferParameterVariable.map(data => {
					// console.log(data);
					for (const item of this.transferParameterVariableOption) {
						// console.warn(this.transferParameterVariableOption, 9999);
						if (data.id === item.id) {
							this.selectedValues.push(item.id);
							break;
						}
					}
					for (const item of this.businessData) {
						if (data.id === item.id) {
							this.selectedValues.push(item.id);
							break;
						}
					}
				});
			}
			// console.warn(this.selectedValues, 'parseInValue');
		},
		// 脱敏配置模式  详情数据回显
		getdesensConfigType(value) {
			let result = '';
			switch (value) {
				case 'userName':
					result = '姓名';
					break;
				case 'idCard':
					result = '身份证号';
					break;
				case 'phoneNumber':
					result = '手机号';
					break;
				case 'homeAddress':
					result = '家庭地址';
					break;
				default:
					result = '';
					break;
			}
			console.warn(result, 'getdesensConfigType', value);
			return result;
		},
		getDetailSpeech(type, value) {
			console.warn(type, value, 'getDetailSpeech');
			let result = '';
			if (type === 'userName') {
				switch (value) {
					case 0:
						result = '不脱敏';
						break;
					case 4:
						result = '全脱敏';
						break;
					case 1:
						result = '保留首字';
						break;
					case 2:
						result = '保留末字';
						break;
					case 3:
						result = '首末各留一字';
						break;
					default:
						result = '';
						break;
				}
				return result;
			} else if (type === 'idCard') {
				switch (value) {
					case 0:
						result = '不脱敏';
						break;
					case 15:
						result = '脱敏地址区 脱敏生日区 脱敏生日月日区 脱敏顺序号';
						break;
					case 1:
						result = '脱敏地址区';
						break;
					case 2:
						result = '脱敏顺序号';
						break;
					case 4:
						result = '脱敏生日区';
						break;
					case 8:
						result = '脱敏生日月日区';
						break;
					case 3:
						result = '脱敏地址区 脱敏顺序号';
						break;
					case 9:
						result = '脱敏地址区 脱敏生日月日区';
						break;
					case 13:
						result = '脱敏地址区 脱敏生日区 脱敏生日月日区';
						break;
					case 5:
						result = '脱敏地址区 脱敏生日区';
						break;
					case 6:
						result = '脱敏顺序号 脱敏生日区';
						break;
					case 10:
						result = '脱敏顺序号 脱敏生日月日区';
						break;
					case 12:
						result = '脱敏生日区 脱敏生日月日区';
						break;
					case 14:
						result = '脱敏生日区 脱敏生日月日区 脱敏顺序号';
						break;
					default:
						result = '';
						break;
				}
				return result;
			} else if (type === 'phoneNumber') {
				switch (value) {
					case 0:
						result = '不脱敏';
						break;
					case 4:
						result = '全脱敏';
						break;
					case 1:
						result = '保留前三位';
						break;
					case 2:
						result = '保留后四位';
						break;
					case 3:
						result = '脱敏中间四位';
						break;
					default:
						result = '';
						break;
				}
				return result;
			} else if (type === 'homeAddress') {
				switch (value) {
					case 0:
						result = '不脱敏';
						break;
					case 4:
						result = '全脱敏';
						break;
					case 1:
						result = '保留首字';
						break;
					case 2:
						result = '保留末字';
						break;
					case 3:
						result = '首末各留一字';
						break;
					default:
						result = '';
						break;
				}
				return result;
			}
			console.log('speechCheck:', result);
			console.log(type, value);
			return result;
		},
		getDetailSubtitle(type, value) {
			let result = '';
			if (type === 'userName') {
				switch (value) {
					case 0:
						result = '不脱敏';
						break;
					case 4:
						result = '全脱敏';
						break;
					case 1:
						result = '保留首字';
						break;
					case 2:
						result = '保留末字';
						break;
					case 3:
						result = '首末各留一字';
						break;
					default:
						result = '';
						break;
				}
				return result;
			} else if (type === 'idCard') {
				switch (value) {
					case 0:
						result = '不脱敏';
						break;
					case 15:
						result = '脱敏地址区 脱敏生日区 脱敏生日月日区 脱敏顺序号';
						break;
					case 1:
						result = '脱敏地址区';
						break;
					case 2:
						result = '脱敏顺序号';
						break;
					case 4:
						result = '脱敏生日区';
						break;
					case 8:
						result = '脱敏生日月日区';
						break;
					case 3:
						result = '脱敏地址区 脱敏顺序号';
						break;
					case 9:
						result = '脱敏地址区 脱敏生日月日区';
						break;
					case 13:
						result = '脱敏地址区 脱敏生日区 脱敏生日月日区';
						break;
					case 5:
						result = '脱敏地址区 脱敏生日区';
						break;
					case 6:
						result = '脱敏顺序号 脱敏生日区';
						break;
					case 10:
						result = '脱敏顺序号 脱敏生日月日区';
						break;
					case 12:
						result = '脱敏生日区 脱敏生日月日区';
						break;
					case 14:
						result = '脱敏生日区 脱敏生日月日区 脱敏顺序号';
						break;
					default:
						result = '';
						break;
				}
				return result;
			} else if (type === 'phoneNumber') {
				switch (value) {
					case 0:
						result = '不脱敏';
						break;
					case 4:
						result = '全脱敏';
						break;
					case 1:
						result = '保留前三位';
						break;
					case 2:
						result = '保留后四位';
						break;
					case 3:
						result = '脱敏中间四位';
						break;
					default:
						result = '';
						break;
				}
				return result;
			} else if (type === 'homeAddress') {
				switch (value) {
					case 0:
						result = '不脱敏';
						break;
					case 4:
						result = '全脱敏';
						break;
					case 1:
						result = '保留首字';
						break;
					case 2:
						result = '保留末字';
						break;
					case 3:
						result = '首末各留一字';
						break;
					default:
						result = '';
						break;
				}
				return result;
			}
			console.log('speechCheck:', result);
			console.log(this.form);
			return result;
		},
		getDetailChatmsg(type, value) {
			let result = '';
			if (type === 'userName') {
				switch (value) {
					case 0:
						result = '不脱敏';
						break;
					case 4:
						result = '全脱敏';
						break;
					case 1:
						result = '保留首字';
						break;
					case 2:
						result = '保留末字';
						break;
					case 3:
						result = '首末各留一字';
						break;
					default:
						result = '';
						break;
				}
				return result;
			} else if (type === 'idCard') {
				switch (value) {
					case 0:
						result = '不脱敏';
						break;
					case 15:
						result = '脱敏地址区 脱敏生日区 脱敏生日月日区 脱敏顺序号';
						break;
					case 1:
						result = '脱敏地址区';
						break;
					case 2:
						result = '脱敏顺序号';
						break;
					case 4:
						result = '脱敏生日区';
						break;
					case 8:
						result = '脱敏生日月日区';
						break;
					case 3:
						result = '脱敏地址区 脱敏顺序号';
						break;
					case 9:
						result = '脱敏地址区 脱敏生日月日区';
						break;
					case 13:
						result = '脱敏地址区 脱敏生日区 脱敏生日月日区';
						break;
					case 5:
						result = '脱敏地址区 脱敏生日区';
						break;
					case 6:
						result = '脱敏顺序号 脱敏生日区';
						break;
					case 10:
						result = '脱敏顺序号 脱敏生日月日区';
						break;
					case 12:
						result = '脱敏生日区 脱敏生日月日区';
						break;
					case 14:
						result = '脱敏生日区 脱敏生日月日区 脱敏顺序号';
						break;
					default:
						result = '';
						break;
				}
				return result;
			} else if (type === 'phoneNumber') {
				switch (value) {
					case 0:
						result = '不脱敏';
						break;
					case 4:
						result = '全脱敏';
						break;
					case 1:
						result = '保留前三位';
						break;
					case 2:
						result = '保留后四位';
						break;
					case 3:
						result = '脱敏中间四位';
						break;
					default:
						result = '';
						break;
				}
				return result;
			} else if (type === 'homeAddress') {
				switch (value) {
					case 0:
						result = '不脱敏';
						break;
					case 4:
						result = '全脱敏';
						break;
					case 1:
						result = '保留首字';
						break;
					case 2:
						result = '保留末字';
						break;
					case 3:
						result = '首末各留一字';
						break;
					default:
						result = '';
						break;
				}
				return result;
			}
			console.log('speechCheck:', result);
			console.log(this.form);
			return result;
		},
		onVariableName(valueIn) {
			this.form.variableName = valueIn.replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, '');
		},
		onInitializeField(valueIn) {
			this.form.initializeField = valueIn.replace(/[^a-zA-Z0-9_]/g, '');
		},
		onInput(value) {
			this.form.urlAddress = value;
		}
	}
};
</script>

<style scoped lang="less">
.btns {
	background: #6384fe;
}

.default-text {
	color: #c6cacf;
	font-size: 12px;
	position: absolute;
	top: 32px;
	left: 0;
}
.error-text {
	color: #f56c6c;
	font-size: 12px;
	position: absolute;
	top: 32px;
	left: 0;
}

.add-btn {
	width: 8%;
	position: absolute;
	top: 0;
	left: 95%;
}
.desensitization-box {
	// width: 550px;
	background: #ffffff;
	border: 1px solid #e6e6e6;
	border-radius: 4px;
	.pattern {
		padding-top: 12px;
	}
	// .el-radio-group {
	// 	/deep/ .el-radio {
	// 		display: block;
	// 		margin: 10px 0;
	// 	}
	// }
}
.line {
	height: 2px;
	background: #eee;
	width: 96%;
	display: block;
	margin-left: 10px;
}
.parameter-varible-text {
	.varible-role-box {
		display: flex;
		.role-text {
			font-size: 13px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
			margin: 5px 0 0 5px;
		}
		.role-tag {
			height: 32px;
			background: #ffffff;
			border-radius: 4px;
			color: #6784f2;
			border: 1px solid #c9def8;
			margin: 0 7px;
			cursor: pointer;
		}
		.activeTag {
			height: 32px;
			border-radius: 4px;
			background-color: #e7f2fe;
			border: 1px solid #c9def8;
			color: #5374f2;
			margin: 0 7px;
			cursor: pointer;
		}
	}
	/deep/ .el-tabs__nav-wrap::after {
		background-color: none !important;
		position: relative;
		height: 0;
	}
	.label {
		width: 100%;
		color: #606266;
		font-weight: 400;
	}
	.select {
		color: #409eff;
		font-weight: 700;
	}
}
</style>
<style lang="less">
.borderErr {
	.el-input__inner {
		border-color: #f56c6c !important;
	}
}

.errorText-label .el-form-item__error {
	display: none;
}

.transfer-select .el-input__inner {
	height: none !important;
}

// 多余内容在失焦时....展示
.input-textOverFlow .el-input__inner {
	width: 95%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.desensitization-box .el-form-item__label {
	padding: 8px 0 0 13px;
	line-height: normal;
}
.guest-subtitle-label .el-form-item__label {
	width: 100px;
}
.desensitization-box .el-input__inner {
	// height: 0.5rem !important;
}
.single {
	.el-input__inner {
		height: 0.5rem !important;
	}
}
</style>
